<template>
	<view class="setting-pwd">
		<view class="input-wrapper" :class="!!focus1 ? 'on' : ''">
			<input class="input-s" type="password" @focus="focus1 = true" @blur="focus1 = false" :placeholder="i18n.setLoginPass"
			 placeholder-class="placeholder-class" v-model="pwd" />
		</view>
		<view class="input-wrapper" :class="!!focus2 ? 'on' : ''">
			<input class="input-s" type="password" @focus="focus2 = true" @blur="focus2 = false" :placeholder="i18n.againPass"
			 placeholder-class="placeholder-class" v-model="confirmPwd" />
		</view>
		<button class="btn-block" hover-class="btn-hover" @click="submit">{{i18n.confirm}}</button>
		<safetyVerification ref="verificationRef" type="login" @affirm="affirm" :userInfo="userInfo" requestUrl="api/sms/setpassword"/>
	</view>
</template>

<script>
	import safetyVerification from '@/components/safetyVerification2.vue';
	import {isValPw} from '../../utils/val.js'
	export default {
		components: {
			safetyVerification
		},
		data() {
			return {
				pwd: '',
				confirmPwd: '',
				focus1: false,
				focus2: false,
				userInfo: {},
			};
		},
		onShow(){
			this.fetchUserInfo()
			uni.setNavigationBarTitle({
			 title: this.$t('settimgLoginPwd.loginPass')
			})
		},
		computed:{
			i18n() {
				return this.$t('settimgLoginPwd');
			}
		},
		methods: {
			fetchUserInfo() {
				let userInfo = this.$getStore('ucenterInfo', true)
				this.userInfo = userInfo
				this.$post('api/ucenter/info')
					.then(res => {
						let userInfo = res.data
						this.userInfo = userInfo
						this.$setStore('ucenterInfo', userInfo, true)
						if (userInfo.mobile_open) {
							this.checked = true
						}
					})
			},
			submit() {
				const {
					confirmPwd,
					pwd
				} = this
				if (!confirmPwd || !pwd) return this.$toast(this.$t('settimgLoginPwd.complete'))
				if (!isValPw(pwd)) return this.$toast(this.$t('settimgLoginPwd.checkPass'))
				if (confirmPwd !== pwd) return this.$toast(this.$t('settimgLoginPwd.inconsistent'))
				this.$refs.verificationRef.show();
			},
			affirm(data) {
				const {
					pwd
				} = this
				this.$post('api/ucenter/setpassword', {
						password: pwd,
						type: 'login',
						...data
					})
					.then(res => {
						this.$toast(res.msg)
						setTimeout(() => {
							uni.navigateTo({
								url:'../login/index'
							})
						}, 1000)
					})
			}
		}
	};
</script>

<style lang="less" scoped="">
	.setting-pwd {
		padding: 40upx 30upx;
		.input-wrapper {
			position: relative;
			height: 100upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--border);
			margin-bottom: 20upx;
			font-size: 28upx;
            .tit{
				margin-right: 50upx;
			}
			.input-s {
				flex: 1;
			}

			&.on {
				border-color: var(--theme-color);
			}
		}

		.btn-block {
			margin-top: 100upx;
		}
	}
</style>
